<template>
  <!-- 已作废 -->
  <div>
    <el-table-form ref="form" :model="query">
      <el-form-item class="merge-item">
        <el-select ref="qtype" v-model="qtype" style="width: 170px; margin-right: 2px;">
          <el-option label="押金单号" value="depositCode" />
          <el-option label="客户电话" value="csmPhone" />
          <el-option label="客户编号" value="csmCode" />
          <el-option label="客户名称" value="csmName" />
          <el-option label="身份证号" value="csmCardNo" />
          <!-- <el-option label="备注" value="remark" />
          <el-option label="经办人" value="transactor" />
          <el-option label="收款人" value="depReceiver" />
          <el-option label="作废人" value="operator" />
          <el-option label="商品描述" value="goodsDesc" /> -->
        </el-select>
        <el-input v-model.trim="param1" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item :table-form-merge="2" class="merge-item">
        <el-select ref="timetype" v-model="timetype" style="width: 170px; margin-right: 2px;">
          <el-option label="押金登记时间" value="createTime" />
          <el-option label="开始时间" value="beginDt" />
          <el-option label="经办时间" value="transactDt" />
          <el-option label="作废时间" value="operateDt" />
        </el-select>
        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
        />
      </el-form-item>
      <el-form-item label="押瓶机构:" class="merge-item">
        <el-tree-select
          v-model="query.ckOrgSNNo"
          :clearable="false"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择',
          }"
          :tree-params=" {
            'expand-on-click-node': false,
            'highlight-current': true,
            'filterable': true,
            props:{
              value:'orgSNNo',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData
          }"
        />
      </el-form-item>
      <el-form-item label="客户类型:" class="merge-item">
        <el-select ref="csmType" v-model="query.csmType" clearable placeholder="请选择">
          <el-option v-for="(v,i) in entTypeList" :key="i" :label="v.desc" :value="v.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="排序:" class="merge-item" placeholder="请选择">
        <el-select ref="orderby" v-model="query.orderby">
          <el-option label="押金登记时间" :value="2" />
          <el-option label="开始时间" :value="3" />
          <el-option label="经办时间" :value="5" />
          <el-option label="作废时间" :value="7" />
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式:" class="merge-item">
        <el-select ref="paymentMethod" v-model="query.paymentMethod" placeholder="请选择" clearable>
          <el-option label="现金" :value="1" />
          <el-option label="微信支付" :value="2" />
          <el-option label="支付宝" :value="128" />
          <el-option label="门店扫码" :value="2048" />
          <el-option label="银行支付" :value="1024" />
        </el-select>
      </el-form-item>
      <template v-slot:btns>
        <el-button v-permission="[20203,1]" type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </template>
    </el-table-form>
    <div style="margin-bottom: 10px;">
      <el-button v-permission="[20203,2]" type="primary" icon="el-icon-download" @click="exportFile(0)">导出</el-button>
    </div>
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      v-el-height-adaptive-table="{ bottomOffset: 10 }"
      border
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data.rows"
      highlight-current-row
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />
    <popups ref="popups" :calc-type-list="calcTypeList" :payment-method-list="paymentMethodList" :pay-status-list="payStatusList" :customer-type="customerType" />
    <csm-detail ref="csmDetail" :parent-fetch-data="refresh" :tree-data="treeData" :calc-type-list="calcTypeList" :paymen-fil-list="paymenFilList" />
  </div>
</template>

<script>
  import { queryTheDepositList, queryExportDomain, queryCashPledgeObtainExport } from '@/api'
  import moment from 'dayjs'
  import { formatColumnMap, parseTime } from '@/utils'
  import CsmDetail from '../../../components/CsmDetailModal/index.vue'
  import Popups from './Popups'

  export default {
    name: 'already-invalid-tab',
    components: { CsmDetail, Popups },
    props: {
      entTypeList: {
        type: Array,
        required: true
      },
      treeData: {
        type: Array,
        required: true
      },
      calcTypeList: {
        type: Array,
        required: true
      },
      paymentMethodList: {
        type: Array,
        required: true
      },
      payStatusList: {
        type: Array,
        required: true
      },
      paymenFilList: {
        type: Array,
        required: true
      },
      customerType: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        qtype: 'csmPhone',
        param1: '',
        timetype: 'createTime',
        date: [],
        query: {
          csmType: '',
          ckOrgSNNo: '',
          orderby: 7,
          depStatus: 4, // 只查询已作废的单据
          paymentMethod: ''
        },
        depositStatusMap: [
          { 'value': 1, 'desc': '未审核', 'key': 'NOT_AUDIT' },
          { 'value': 2, 'desc': '已审核', 'key': 'AUDITED' },
          { 'value': 3, 'desc': '已消单', 'key': 'RETURNED' },
          { 'value': 4, 'desc': '已作废', 'key': 'VOIDED' },
          { 'value': 5, 'desc': '审核不通过', 'key': 'NOT_PASS' },
          { 'value': 6, 'desc': '消单待确认', 'key': 'RETURN_APPLY' },
          { 'value': 9, 'desc': '作废待确认', 'key': 'VOID_APPLY' }
        ],
        tableData: {
          total: 0,
          column: [
            {
              type: 'index',
              fixed: 'left'
            },
            {
              prop: 'depositUrl',
              label: '图片',
              width: 50,
              fixed: 'left',
              render: (h, { row }) => <span>{row.depositUrl && <i class='el-icon-picture'></i>}</span>
            },
            {
              prop: 'depositCode',
              label: '押金单号',
              width: 120,
              fixed: 'left',
              render: (h, { row }) => <el-link underline={false} onClick={() => this.showDeposit(row)}>{row.depositCode}</el-link>
            },
            {
              prop: 'csmCode',
              label: '客户编号',
              width: 110,
              render: (h, { row }) => <el-link underline={false} onClick={() => this.openCsmDetail(row)}>{row.csmCode}</el-link>
            },
            {
              prop: 'csmName',
              label: '客户名称',
              width: 100
            },
            {
              prop: 'csmType',
              label: '客户类型',
              width: 100,
              render: (h, { row }) => <span>{ row.csmType && formatColumnMap(this.entTypeList, 'value', row.csmType, 'desc') }</span>
            },
            {
              prop: 'csmPhone',
              label: '联系电话',
              width: 120
            },
            {
              prop: 'totalCount',
              label: '总数量',
              width: 80
            },
            {
              prop: 'goodsDesc',
              label: '商品描述',
              width: 180
            },
            {
              prop: 'totalDeposit',
              align: 'right',
              label: '总押金',
              width: 80
            },
            {
              prop: 'fee1',
              align: 'right',
              label: '手续费',
              width: 80,
              render: (h, { row }) => <span>{ row.fee1 || <span>0.00</span> }</span>
            },
            {
              prop: 'ckOrgName',
              label: '押瓶机构',
              width: 120
            },
            {
              prop: 'createTime',
              label: '押金登记时间',
              width: 200,
              render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            {
              prop: 'depStatus',
              label: '状态',
              width: 110,
              render: (h, { row }) => <span>{this.depositStatusMap.find(v => row.depStatus === v.value).desc}</span>
            },
            {
              prop: 'paymentMethod',
              label: '支付方式',
              width: 110,
              render: (h, { row }) => <span>{ row.paymentMethod && formatColumnMap(this.paymenFilList, 'value', row.paymentMethod, 'desc') }</span>
            },
            {
              prop: 'remark',
              label: '备注',
              width: 110
            },
            {
              prop: 'beginDt',
              label: '开始时间',
              width: 200,
              render: (h, { row }) => <span>{ row.beginDt && parseTime(row.beginDt, '{y}-{m}-{d}') }</span>
            },
            {
              prop: 'transactor',
              label: '经办人',
              width: 110
            },
            {
              prop: 'depReceiver',
              label: '收款人',
              width: 110
            },
            {
              prop: 'transactDt',
              label: '经办时间',
              width: 200,
              render: (h, { row }) => <span>{ row.transactDt && parseTime(row.transactDt, '{y}-{m}-{d}') }</span>
            },
            {
              prop: 'operator',
              label: '作废人',
              width: 110
            },
            {
              prop: 'operateDt',
              label: '作废时间',
              width: 200,
              render: (h, { row }) => <span>{ row.operateDt && parseTime(row.operateDt, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            }
          ],
          data: {
            rows: []
          }
        },
        exportDomain: ''
      }
    },
    computed: {},
    created() {
      this.getExportDomain()
    },
    methods: {
      _getQuery(obj) {
        const query = {}
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] !== '') {
              query[key] = obj[key]
            }
          }
        }
        return query
      },
      // 列表
      async fetchData({ currentPage, pageSize }) {
        const params = { ...this.query }
        params[this.qtype] = this.param1.trim()
        if (this.date.length === 2) {
          params[this.timetype] = moment(this.date[0]).format('YYYY-MM-DD') + ' 00:00:00'
          params[`${this.timetype}End`] = moment(this.date[1]).format('YYYY-MM-DD') + ' 23:59:59'
        }
        const query = {
          ...this._getQuery(params),
          currentPage,
          pageSize
        }
        // 导出数据需要的状态
        this.deriveParamInfo = query
        const result = await queryTheDepositList(query)
        this.tableData.data.rows = result.data.rows
        if (currentPage === 1) {
          this.tableData.total = result.data.total
        }
      },
      refresh() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      // 查询
      async search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      // 押金明细
      showDeposit(row) {
        console.log('押金明细', row)
        this.$refs.popups.open(row, 'info')
      },
      // 打开客户详情弹窗
      async openCsmDetail(row) {
        await this.$refs.csmDetail.open(row, true)
      },
      // 获取导出域名
      async getExportDomain() {
        const res = await queryExportDomain()
        if (res && res.data) {
          this.exportDomain = res.data
        }
      },
      // 导出
      async exportFile(type) {
        this.$confirm(`确定导出数据？`, '提示', {
          type: 'warning'
        }).then(() => {
          const currentPage = this.$refs.lbTable.currentPage
          const pageSize = this.$refs.lbTable.pageSize
          const copyColumn = JSON.parse(JSON.stringify(this.tableData.column))
          // 不需要序号、图片两个字段
          copyColumn.splice(0, 2)
          const str = {}
          copyColumn.forEach(item => {
            str[item.prop] = item.label
          })
          const query = {
            ...this._getQuery(this.deriveParamInfo),
            currentPage,
            pageSize
          }
          query.desensitizeFlag = type
          console.log('query', query)
          console.log('query', str)
          queryCashPledgeObtainExport({
            paramInfo: query,
            kv: str // 表格列
          }).then((res) => {
            window.open(`${this.exportDomain}/page/export/frame?key=${res.data}`, '_blank')
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
